<template>
    <div>
    
        {{message}}
        <h2>{{title}}</h2>
        <!-- 当我们在template模板中使用ref对象,他会进行自动解包 -->
        {{counter}}
        <!-- {{state.counter}} -->

        <!-- 老师这样写还是需要解包的 不知道为啥我这样写就不用 -->
        <h2>当前计数:{{info.counter}}</h2>

        <button @click="increment">+1</button>
    </div>
</template>

<script>
    import { reactive, ref, readonly } from 'vue';

    export default {
        props: {
            message: {
                type: String, 
                required: true
            }
        },
        /**
         * 参数一: props 父组件传递过来的属性
         */
        // setup(props, context)
        // 加个大括号相当于解构
        setup(props, {attrs, slots, emit}) {
            console.log(props.message);
            console.log(attrs);
            console.log(slots);
            console.log(emit);

            // ref counter变成一个ref可响应式的引用
            let counter = ref(100);

            const info = {
                counter
            }

            const increment = () => {
                // 注意这里是不会自动解包的
                counter.value++;
                console.log(counter.value);
            }

            // 使用reactive来让counter响应式
            // const state = reactive({
            //     counter: 100
            // }) 

            // let counter = 100;
            // Reactive Api
            // const increment = () => {
            //     console.log('increment');
            //     // counter++;
            //     state.counter++;
            // }

            // 
            return {
                title: 'Hello World',
                counter,
                // state,
                increment,
                info
            }
        }
    }
</script>

<style scoped>

</style>